<template>
	<view>
		<!-- <u-navbar :is-back="false" title="叮咚优选" :title-bold="false" title-size="34" title-color="black"
			:background="background"></u-navbar> -->
		<view class="search_box" @click="toSearch()">
			<u-search class="search" disabled bg-color="#fff" search-icon-color="#BFBFBF" placeholder="请输入搜索商家"
				v-model="keyword" :showAction="false"></u-search>
			<button open-type="contact"> <text class="iconfont black kf">&#xe658;</text></button>
		</view>

		<view class="list_box">
			<!-- <view class="banner" v-if="banner&&banner.length>0">
				<swiper class="swiper" indicator-dots="true" autoplay="true" duration="2000" circular="true"
					disable-touch="true">
					<swiper-item v-for="(item, index) in banner" :key="index">
						<image class="bimg" :src="item.image"></image>
					</swiper-item>
				</swiper>
			</view> -->

			<view class="cate_box">
				<view @click="toSearch(item)" class="cate_info" v-for="(item,index) in cate" :key="index">
					<image class="cate_img" :src="item.image"></image>
					<view>{{item.name}}</view>
				</view>
			</view>

			<view class="shop_box">

				<view class="shop_info" @click="toUrl(item)" v-for="(item,index) in list" :key="index">

					<view class="shop_head">
						<image :src="item.image" class="shop_img"></image>

						<view>
							<view class="shop_name">{{item.nickname}}</view>
							<view class="label_box">
								<view class="label" v-for="(items,indexs) in item.label" :key="indexs">
									{{items.name}}
								</view>
							</view>
							<view class="time_box">
								<text>营业时间: {{item.start}}-{{item.end}}</text> <text style="margin-left:220rpx;" v-if="item.distance">{{item.distance}}</text>
							</view>
						</view>
					</view>

					<scroll-view :show-scrollbar="false" :scroll-x="true" class="scr">
						<view class="scr_box" v-for="(items,indexs) in item.goods" :key="indexs">
							<view class="img_box">
								<image mode="aspectFit" :src="items.main_image"></image>
							</view>
							<view class="src_name">{{items.name}}</view>
							<view class="src_price">¥{{items.price}}</view>
						</view>
					</scroll-view>

				</view>

			</view>

		</view>



		<view v-if="show" class="bitmap">
			<image :src="none" mode="widthFix"></image>
			<view>亲！暂无商户信息</view>
		</view>



		<!--  <view class="right_box">
			   <u-icon @click="$project.toPath('/pages/tabar/shopcart')" name="shopping-cart" size="44"></u-icon>
			   <view @click="$project.toPath('/pages/tabar/shopcart')">购物车</view>
			   <view class="rxian"></view>
			   <u-icon @click="$project.toPath('/pages/shopcart/cate')" name="file-text" size="44"></u-icon>
			   <view @click="$project.toPath('/pages/shopcart/cate')">分类</view>
		   </view> -->



	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(to bottom, #FDD7D6, #FDE9E2)'
				},
				banner: '',
				cate: [],
				zt: [],
				aimg: '',
				start: '',
				times: '',
				psShow: false,
				psMsg: '',
				params: {
					page: 1,
					lng: '',
					lat: ''
				},
				list: [],
				total: 0,
				show: false,
				none: ''
			}
		},
		onLoad(e) {

			if (e.title) {
				console.log(e);
				uni.setNavigationBarTitle({
					title: e.title
				})
			}

			this.none = this.$imgUrl + 'assets/img/none_fw.png';

			this.getJwList();


		},
		onShow() {
			this.getBanner();
			this.getCate();

			//this.getShopPs();
		},
		methods: {
			toSearch(e) {
				let url = '/pages/zb/search';
				if (e) {
					url += '?cate_id=' + e.id
				}
				uni.navigateTo({
					url: url
				})
			},
			toUrl(e) {
				console.log(e);
				uni.navigateTo({
					url: '/pages/zb/info?id=' + e.id
				})
			},
			enterDetail(item) {
				uni.navigateTo({
					url: '/pages/index/shopdetail?id=' + item.goods.id
				})
			},
			navUrl(e, index) {
				uni.navigateTo({
					url: '/pages/shopcart/cates?cate_id=' + e.id
				})
			},
			toZt(e) {
				if (e.type == 1) {
					uni.navigateTo({
						url: e.url
					})
				} else {
					uni.switchTab({
						url: e.url
					})
				}
			},
			getZt() {
				this.$get(this.$api.shopZt, {}, res => {
					let data = res.data;
					if (data.code == 1) {
						this.zt = data.data;
					}
				});
			},
			getBanner() {
				this.$get(this.$api.zbBanner, {}, res => {
					let data = res.data;
					if (data.code == 1) {
						this.banner = data.data;
					}
				});
			},
			getCate() {

				this.$get(this.$api.zbShopCate, {
					type: 1
				}, res => {
					let data = res.data;
					if (data.code == 1) {
						this.cate = data.data;
					}
				});
			},
			getJwList() {
				let _ = this;
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						_.params.lat = res.latitude;
						_.params.lng = res.longitude;
						_.getList();
					},
					fail(error) {
						_.getList();
						console.log(error);
					}
				})
			},
			getList() {
				this.params.page = 1;
				this.$get(this.$api.zbShopList, this.params, res => {
					let data = res.data;

					if (!data.data.data || data.data.data.length < 1) {
						this.show = true;
					} else {
						this.show = false;
					}

					this.list = data.data.data;
					this.total = data.data.total;
				});
			}
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.params.page++;
				this.$get(this.$api.zbShopList, this.params, res => {
					let data = res.data;
					data.data.data.forEach(ress => {
						this.list.push(ress);
					});
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recomend .title {
		height: 65rpx;
	}

	.search {
		width: 85%;
		margin-right: 5%;
	}

	.search_box {
		box-sizing: border-box;
		padding: 30rpx 30rpx 65rpx 30rpx;
		//background-color: #F7EDE1;

		background: linear-gradient(to bottom, #FDE1DD, #F7EDE1 40%);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.kf {
		font-size: 60rpx;
		color: #BBBAB6;
	}

	.list_box {
		box-sizing: border-box;
		padding: 0 30rpx;
		position: relative;
		top: -50rpx;
	}

	.banner {
		height: 138.13px;
		border-radius: 15rpx;
	}

	.swiper {
		height: 100%;
	}

	.bimg {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}

	.cate_box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		background-color: white;
		margin-top: 15rpx;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 0 0 30rpx 0;
		font-size: 28rpx;
	}

	.cate_info {
		width: 20%;
		text-align: center;
		margin-top: 30rpx;
	}

	.cate_img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.body {
		padding: 0;
	}

	.right_box {
		position: fixed;
		right: 30rpx;
		bottom: 60rpx;
		background-color: white;
		z-index: 100;
		border-radius: 45rpx;
		text-align: center;
		font-size: 24rpx;
		box-sizing: border-box;
		padding: 20rpx 10rpx;
		box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
	}

	.rxian {
		width: 95%;
		height: 1rpx;
		background-color: #F2F2F2;
		margin: 20rpx 0;
	}

	.shop_box {}

	.shop_info {
		background-color: white;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		margin-top: 20rpx;
	}

	.shop_head {
		display: flex;
		margin-bottom: 20rpx;
	}

	.shop_img {
		width: 140rpx;
		height: 140rpx;
		border-radius: 15rpx;
		margin-right: 15rpx;
	}

	.shop_name {
		font-weight: bold;
		font-size: 32rpx;
	}

	.label_box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		//margin-top: 10rpx;
	}

	.label {
		background-color: #EDFDE6;
		box-sizing: border-box;
		padding: 2rpx 5rpx;
		color: #2A7C2F;
		font-size: 22rpx;
		margin-right: 10rpx;
		margin-top: 15rpx;
	}

	.time_box {
		font-size: 22rpx;
		color: #666666;
		margin-top: 15rpx;
	}

	.scr {

		width: 100%;
		white-space: nowrap;
	}

	.scr_box {
		width: 180rpx;
		display: inline-block;
		margin-right: 20rpx;
	}

	.img_box {
		width: 180rpx;
		height: 180rpx;
		border: 1rpx solid #EBEBEB;
		border-radius: 15rpx;

		image {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}

	.src_name {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.src_price {
		color: #FF5757;
		font-size: 24rpx;
		font-weight: bold;
		margin-top: 10rpx;
	}

	.bitmap {
		margin-top: 50rpx;
		text-align: center;

		image {
			width: 60%;
		}
	}
</style>